Skip to main
Article
A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship

Learn Grid Now, Container Queries Can Wait

Take your time with new CSS, but don’t sleep on the essentials

Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

Learn CSS layout in-depth:

To learn more about grid and other CSS layout models, join our Online Smashing Workshop, October 2024.

Chris Coyier wrote about this recently over at Frontend Masters. As he (and several comments) mention, grid and flexbox make layout more responsive without the need for queries. That’s true! But looking at the numbers, I think we’re asking the wrong question.

Container (size) queries shipped in Firefox on February 14, 2023 – the last major browser to ship the feature. Chrome/Edge and Safari shipped a few months earlier, in the fall of 2022. CanIUse lists size queries support in 93.49% of all tracked browsers, with a Baseline status of Newly Available.

In contrast, Safari shipped CSS grid on March 27, 2017 – and Edge un-prefixed the feature on October 17 that same year. CanIUse lists grid support in 99.39% of all tracked browsers, with a Baseline status of Widely Available.

These are the two ‘stages’ of Baseline support, as described on Google’s web.dev:

Even in single-digits, 6% of the web is still a big difference in support.

Firefox was the first to support flexbox behind a prefix, and the last to un-prefix the feature on March 18, 2014. CanIUse shows flexbox support in 99.9% of all tracked browsers. Solidly in the wide support category for Baseline, but only a fraction more than grid support.

Chris links the Chrome usage counters for container queries. I’m warned these numbers are extremely unreliable – easily triggered by feature checks (e.g. Modernizr), unused code in third-party libraries, or popular outliers skewing the data – so take this with truckloads of salt. Here’s what I see:

The State of CSS survey attempts to measure how many web authors are using a feature. This is also suspect, but 26.7% of 2023 respondents ‘have used’ container queries). They didn’t have questions about grid and flexbox.

With popular tools like Bootstrap shipping flexbox-based grid systems, it’s not surprising to see it highly represented in the Chrome use counter. Maybe this data is meaningless. But anecdotally, it does seem like most developers are using flexbox, a few are also using grid, and everyone still has container queries on their to-do list once it has better support.

Container queries are basically brand new. But what’s going on with grids?

The CanIUse defaults are broken:

By default, CanIUse will show you % of all users, which is a very misleading number. Since nearly 3% of browsers are untracked, those support numbers will never go over 97% for new features. I recommend opening the CanIUse default display settings, and selecting All tracked users. You might also want to apply the ‘filtered’ view, to see only browsers with more than 0.5% usage by default.

As close observers of CSS we often overestimate how long these features have been around. Especially with newer features shipping every few months. Our scale is off!

You’re still talking about container queries?! That was before color mixing and selector nesting, last year! Try to keep up! If you’re not learning view transitions with anchor positions now, you’ll be left behind!

I get it. I’m in the CSS Working Group, regularly discussing features that won’t even become newly available for another year or three. At OddBird, we often work on internal tools for clients – building from scratch, with little need for legacy support.

I’ve been thinking about (and playing with) container queries for much longer than the baseline wide support 30 months. I wrote the specification, and started building demos in January 2021 (this demo is broken, since the syntax changed several times). But actual browser support is barely over half-way there – reaching 16 months next week.

This is still a very new feature, despite our hype cycles moving on.

Many developers are working in a context with much more conservative legacy support policies – often waiting for ‘full’ support of a new feature before they even consider using it in production.

In conversations, I especially hear concerns about browsers like iOS Safari that update more slowly, sometimes requiring a much heavier OS update. Safari on Mac may update in monthly-ish cycles, but users with an old phone are more often out-of-date.

Big sites are container ships that will get stuck in the Suez Canal during high winds, or decimate the Francis Scott Key bridge when there’s a power issue. These ships are not easy to maneuver. Sometimes they are maintaining essential resources for a long tail of users on older devices – sometimes they are weighed down by the sheer scale of their organization. Either way, it takes some time to change course.

But it’s not just the sites that are difficult to move. Developers can start sprinkling text-wrap: balance on headings with a 5-minute pull request, no matter how large the project. But Layout Systems are core features, and often rely on third-party tooling. It’s one thing to install new light fixtures, it’s another thing to replace the entire hull of a ship. Even with a smaller team, a smaller project, and a lighter browser-support matrix – it doesn’t make sense to re-write your code base or design system every time a new feature comes out.

We started phasing out Susy (our light-weight grid system) on OddBird projects in 2015. By 2017, we were recommending others do the same, and we officially deprecated the project on Jul 14, 2020. Four years later, OddBird.net/susy still has the highest traffic of anything on our site, and the susy package gets nearly 19k weekly downloads on npm.

There’s no rush to rip out all your media queries, and replace them with containers. You’ll be fine waiting for widely available support and your next scheduled re-factor.

But if you’re still avoiding grid – whatever your reasons – you are, in fact, missing out. CSS grid is one of the best features in CSS, and one of the biggest time-savers on every site we build.

I can imagine it’s hard to re-write a system built on flexbox. Flexbox is a great feature, and part of the web platform. What more do you need?

But flexbox is designed for content-out distribution, not system-wide page layouts. Using flexbox alone is like only using inline text, without paragraphs, divs, and other block elements. You’re using half the system, and it’s the more complicated half to manage.

At some point people looked at grid and thought “that looks complicated” – then spent nearly a decade over-complicating flexbox to compensate. People still rely on third-party grid systems like Bootstrap, because flexbox needs to be coerced into doing this job.

No! Stop. It’s time to learn grid. Right now. You might not think you need it, but you do. Set down container queries, and go learn grid.

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Webmentions

nicod_

from diaspodon.fr

@nhoizey Over the last few days, I’ve been learning new tricks with the grid that have opened up new ways for me.
I’m amazed at what you can do with it…

MelHamnavoe

from phpc.social

@nhoizey @mia Grid and Flexbox are not an either or, they are designed to work together. They are the Batman & Robin of #webdev

Recent Articles

  1. A gallery of numbered images in four columns
    Article post type

    Choosing a Masonry Syntax in CSS

    What makes something a ‘grid’, and what’s at stake?

    Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use.

    see all Article posts
  2. see all Article posts
  3. Article post type

    Partial Feature Queries, Relaxed Layout Containment, and More

    CSS Working Group updates from July

    Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).

    see all Article posts